iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Modern Web

RRRR的世界 (Ruby on Rails + React + Redux)系列 第 10

Day 10, npm, webpack... 那些好用的工具寫一起

  • 分享至 

  • xImage
  •  

切入正題直接。

npm

什麼是npm?

他全名叫Node Package Manager,用於管理Javascript套件使用,又因為我們是用在Rails下,所以不探討後端NodeJs的套件,純屬探討前端、工具、最佳化JS相關的套件。
以下是我的Node與npm版本
http://ithelp.ithome.com.tw/upload/images/20161225/20103835WYJoKoWRoH.png

npm install

在執行npm的過程,最讓我熟悉的就是npm install,把在package.json中dependencies與devDependencies裡有提到的package都安裝進node_modules資料夾裡,或者你也可以下 -g 的參數讓你要安裝的package安裝成global套件。
http://ithelp.ithome.com.tw/upload/images/20161225/20103835pVK0AehcFH.png

npm run

除此之外,package中scripts也可以定義一些常用的指令,之後只要 npm run [指令] 就可以了
http://ithelp.ithome.com.tw/upload/images/20161225/20103835FwYsKW2QLK.png

npm outdate, npm update

npm outdate可以列出哪些套件有更新,並可透過update更新。
要注意先看看更新哪些套件,以及更新後會要做什麼調整喔
http://ithelp.ithome.com.tw/upload/images/20161225/20103835KqVYfs41sQ.png

webpack

Webpack給了正在使用 gulp 和 browserify 的開發者另一個選擇來完成模組整合的工作
From (https://rhadow.github.io/2015/03/23/webpackIntro/)

webpack的設定對我而言真的是非常複雜,我目前也只是略懂略懂。當初在react中會使用到它,最主要是因為兩個功能:

  1. Watch
  2. 轉換JSX, coffeescript, Javascript
    可以觀看專案中的JS有哪些改變,並即時編譯一個output出來。然後又可以轉換coffeescript jsx (cjsx)到js格式。

好,開始逐一介紹有用到的部分:

Entry

  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },

給定一個入口,讓webpack去逐一監看入口有用到的Javascript文件,有改變時適時更新。
也可將常用套件分割開來,像是把JQuery, D3, bootstrap之類的套件,放進Vendor裡

output

  output: {
    filename: 'webpack-bundle.js',
    path: '../app/assets/webpack',                                                                                                                                                
  },

指定output出來的路徑,必要時可以去看一下output的結果是不是跟我們預想的一樣。

module

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: [node_modules_dir],
      loader: 'babel'
    }]
  },

放置會用到的loader,舉凡CSS, file, image都可以,loader還可以用"!"串在一起使用。

resolve

  resolve: {
    extensions: ['', '.js', '.json', '.coffee'] 
  }

這樣之後Require的時候就不用寫副檔名啦~

好,這邊就是這麼多!!
我還沒用完所有的webpack,有錯誤的地方還要請大家見諒!
聖誕快樂各位~明天來多跑幾個範例,把目錄稍微更動一下!


上一篇
Day 9, React_on_rails Doc 的重點整理
下一篇
Day 11, 兩個React_on_rails範例
系列文
RRRR的世界 (Ruby on Rails + React + Redux)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言